<template>
	<div class="llf_content" style="flex-direction:row">
		<div class="left_list">
			<SearchHeader @search="onSearch" placeholder="患者姓名,患者电话搜索">
				<template v-slot:rightBtn>
					<MyButton class="primary" @click="onClickoperate('edit')" title="新增角色" />
					<MyButton class="primary" @click="addRoleurlVisible = true" title="新增权限" />
				</template>
			</SearchHeader>
			<LeftList :tableData="dataSource" @onClickLeft="onClickLeft" @operation="onClickoperate" />
		</div>
		<div class="right_cont" v-if="asideInfo.title !==''">
			<h3>编辑权限</h3>
			<p class="total_title">当前正对「{{asideInfo?.title}}」角色的权限进行分配！</p>
			<EditRole  @onsubmit="onsubmit" :editPowers="editPowers" classfiy="role" />
		</div>
		<div v-else class="right_cont">
			暂无数据
		</div>
		<MyDialog v-model:visible="addRoleVisible" :title="formData.role?'编辑角色':'新增角色'" width="30%" destroyOnClose 
			@onClose="addRoleVisible = false">
			<template v-slot:content>
				<CreateRole :formData="formData" @onClose="addRoleVisible = !addRoleVisible"
					@success="onSuccess" @shareRole="(event)=>{ createTitle = event,shareVisiable = true }"
				/>
			</template>
		</MyDialog>
		<MyDialog :mask="false" v-model:visible="shareVisiable" title="编辑权限" :width="600" destroyOnClose
			@onClose="shareVisiable = false">
			<template v-slot:content>
				<p class="total_title">当前正对「{{formData.title||createTitle}}」角色的权限进行分配！</p>
				<EditRole @onsubmit="onCreatesubmit" @onCancel="shareVisiable = false" :editPowers="createPowers" />
			</template>
		</MyDialog>
		<MyDialog v-model:visible="addRoleurlVisible" title="f" width="50%" destroyOnClose
			@onClose="addRoleurlVisible = false">
			<template v-slot:content>
				<CreateRoleurl />
			</template>
		</MyDialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref, computed, watch, nextTick, onMounted } from "vue";
	import { Modal } from 'ant-design-vue';
	import { useOrganization } from "@/store";
	import { findroleList, deleteRole } from "@/api/orang";
	import Message from "@/utils/message";
	import LeftList from './components/LeftList.vue';
	import EditRole from './components/EditRole.vue';
	import CreateRole from './components/CreateRole.vue';
	import CreateRoleurl from './components/CreateRoleurl.vue';
	
	const OrganStore = useOrganization();
	OrganStore.getPowerList();
	
	const dataPower = computed(()=> OrganStore.$state.powerList);
	
	const asideInfo = ref({ title:'' });
	const dataSource = ref([{ name:'dd',id:1 }]);
	const editPowers = ref({});
	const formData = ref({});
	const addRoleVisible = ref(false);
	const addRoleurlVisible = ref(false);
	const createPowers  = ref({});
	const shareVisiable = ref(false);
	const createTitle = ref('');
	
	async function getTable(){
		const res = await findroleList({ page:1,size:99 });
		if(!res) return;
		dataSource.value = res.list;
	}
	
	const onSearch = (inputValue)=>{
		console.log(inputValue);
	};
	
	const onClickLeft = async (record, index)=>{
		// nextTick(()=>{
		// 	$('.ant-table-row').click(function(){
		// 		$(this).addClass('td_active_color');
		// 		$(this).siblings().removeClass('td_active_color');
		// 	});
		// });
		// asideInfo.value = record;
		// const res = await getRoleInfo({ role:record.role });
		// if(!res) return;
		// console.log(res, "power");
		// if(Array.isArray(res.power)){
		// 	editPowers.value['api'] = [];
		// 	editPowers.value['route'] = [];
		// }else{
		// 	const { api, route } = res.power;
		// 	 api ? editPowers.value['api'] = api.map((item)=> item.id):editPowers.value['api'] = [];
		// 	 route ? editPowers.value['route'] = route.map((item)=> item.id):editPowers.value['route'] = [];
		// }
	};
	
	const onClickoperate = async (type, row ={})=>{
		formData.value = row;
		console.log(type, "type")
		switch(type){
			case 'edit':{
				if(!row.role){
					createPowers.value = {};
				}
				addRoleVisible.value = true;
			};break;
			case 'delete':{
				Modal.confirm({
				    content: `您确定要永久删除吗？`,
				    async onOk() {
						const res = await deleteRole({ id:row.id });
						if(!res) return;
						Message.success("删除角色成功");
						getTable();
				       // console.log(2);
				    },
				    // eslint-disable-next-line @typescript-eslint/no-empty-function
				    onCancel() {},
				});
			};break;
			default:console.log(1);
		}
	};
	
	const onsubmit = async (value)=>{ // 页面编辑右边权限
		// const { api, route } = value;
		// let power_ids = '';
		// const arr = api.concat(route);
		// arr.forEach((item, index)=>{
		// 	if(index == arr.length - 1){
		// 		power_ids += item;
		// 	}else{
		// 		power_ids += item +',';
		// 	}
		// });
		// const res = await updateRole({ ...asideInfo.value, power_ids});
		// if(!res) return;
		// organizationStore.getRoleList(true);
		// Message.success('修改角色权限成功');
	};
	
	const onSuccess = ()=>{// 创建或更新角色成功
		addRoleVisible.value = false;
		createPowers.value = {};
		getTable();
	};
	
	const onCreatesubmit = (value)=>{ // 新增角色的时候的权限分配
		// const { api, route } = value;
		formData.value.power = value;
		createPowers.value = value;
		shareVisiable.value = false;
	};
	
	onMounted(()=>{
		getTable();
	});
</script>

<style lang="less" scoped>
	.left_list{
		width:30%;
		background-color: @white;
		border-radius: 7px;
		padding: 20px;
	}
	.right_cont{
		flex:1;
		margin-left: 20px;
		background-color: @white;
		border-radius: 7px;
		padding: 20px;
	}
	.total_title{
		color: #313131;
		font-size: 15px;
		padding: 10px;
	}
</style>